<script setup lang="ts">
import { ref, toRefs } from 'vue';

import {
  ElButton,
  ElCol,
  ElDialog,
  ElDivider,
  ElInput,
  ElMessage,
  ElRow,
} from 'element-plus';

const props = defineProps({
  isAddToLayerDialogShow: {
    type: Boolean,
    default: false,
  },
  currentDataSource: {
    type: Object,
    default: () => {},
  },
  catalogBreadCrumb: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits([
  'closeAddToLayerDialog',
  'changeCatalogBreadCrumb',
  'addToLayerConfirm',
]);
const { isAddToLayerDialogShow, currentDataSource } = toRefs(props);
const layerName = ref(currentDataSource.value.sourceName); // 初始值与数据源名称同名
const closePreviewDialog = () => {
  emit('closeAddToLayerDialog');
};
const addToLayer = (layerName: any) => {
  if (layerName === '') {
    ElMessage.error('图层名不能为空！');
    return;
  }
  emit('addToLayerConfirm', layerName);
  emit('closeAddToLayerDialog');
};
</script>

<template>
  <div>
    <ElDialog
      v-model="isAddToLayerDialogShow"
      title="添加至图层"
      width="23%"
      align-center
      @close="closePreviewDialog"
      destroy-on-close
      center
      :close-on-click-modal="false"
    >
      <ElRow class="row-style">
        <ElCol :span="6">
          <span style="font-size: 15px; font-weight: 600">当前数据源：</span>
        </ElCol>
        <ElCol :span="18">
          <ElInput
            v-model="currentDataSource.sourceName"
            :disabled="true"
            size="default"
          />
        </ElCol>
      </ElRow>
      <ElDivider
        border-style="hidden"
        style="margin-top: 10px; margin-bottom: 10px"
      />
      <ElRow class="row-style">
        <ElCol :span="6">
          <span style="font-size: 15px; font-weight: 600">图层名称：</span>
        </ElCol>
        <ElCol :span="18">
          <ElInput v-model.trim="layerName" size="default" />
        </ElCol>
      </ElRow>
      <ElDivider
        border-style="hidden"
        style="margin-top: 15px; margin-bottom: 15px"
      />
      <div style="display: flex; justify-content: space-evenly">
        <ElButton type="primary" size="default" @click="closePreviewDialog">
          取消
        </ElButton>
        <ElButton type="primary" size="default" @click="addToLayer(layerName)">
          添加
        </ElButton>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped>
:deep(.el-dialog) {
  border-radius: 20px;
}

.row-style {
  display: flex;
  align-items: center;
}

.el-button {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

/* :deep(.el-form-item__label) {
  padding: 0;
} */

.el-button:hover {
  color: rgb(20 49 129);
  background-color: #3f9eff;
  border-color: #3f9eff;
}
</style>
